<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"chuangges.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="audio、Canvas、WebSocket、Worker拖放操作、地理定位、全屏模式、数据存储">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML 元素">
<meta property="og:url" content="https://chuangges.gitee.io/2019/05/06/3-1-html/index.html">
<meta property="og:site_name" content="闯哥要去流浪了">
<meta property="og:description" content="audio、Canvas、WebSocket、Worker拖放操作、地理定位、全屏模式、数据存储">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-05-06T14:50:40.000Z">
<meta property="article:modified_time" content="2023-12-05T06:11:28.837Z">
<meta property="article:author" content="chuangges">
<meta property="article:tag" content="HTML CSS">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://chuangges.gitee.io/2019/05/06/3-1-html/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>HTML 元素 | 闯哥要去流浪了</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="闯哥要去流浪了" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">闯哥要去流浪了</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">愿你岁月可回首，且以深情共白头</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://chuangges.gitee.io/2019/05/06/3-1-html/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/chuang.png">
      <meta itemprop="name" content="chuangges">
      <meta itemprop="description" content="chuangge's blog.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="闯哥要去流浪了">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          HTML 元素
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-05-06 22:50:40" itemprop="dateCreated datePublished" datetime="2019-05-06T22:50:40+08:00">2019-05-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2023-12-05 14:11:28" itemprop="dateModified" datetime="2023-12-05T14:11:28+08:00">2023-12-05</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/HTML-CSS/" itemprop="url" rel="index"><span itemprop="name">HTML CSS</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>19k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>17 分钟</span>
            </span>
            <div class="post-description">audio、Canvas、WebSocket、Worker<br>拖放操作、地理定位、全屏模式、数据存储</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="入门基础"><a href="#入门基础" class="headerlink" title="入门基础"></a>入门基础</h1><h2 id="元素分类"><a href="#元素分类" class="headerlink" title="元素分类"></a>元素分类</h2><ul>
<li>行内元素：一行可放多个、宽高不可设置、宽度包裹内容。常用的有：<code>i、a、span、label、strong</code>。</li>
<li>块级元素：独占一行、可设宽高、不设宽度时默认是其父元素的 100%。6个属性：<code>width、height、background、border、padding、margin</code>。常用的有：<code>h、p、ul、div、table</code>。</li>
<li>行内块元素：一行多个、可设宽高。常用的有：<code>img、input、button</code>。</li>
</ul>
<h2 id="布局模型"><a href="#布局模型" class="headerlink" title="布局模型"></a>布局模型</h2><blockquote>
<p>整体布局用浮动、局部布局用定位。</p>
</blockquote>
<ol>
<li>流动模型：浏览器默认文档流。块级元素自下而上、内联元素自左而右按顺序排列。</li>
<li>层模型：定位流。父元素相对定位，子元素绝对&#x2F;固定定位，z-index 定义堆叠顺序。</li>
<li>浮动模型：浮动流。浮动元素脱离文档流而释放空间，但不遮挡后面内容。<br>* float：设计初衷是文字环绕效果，主要特性有包裹性、破坏性。<br>* 清除浮动：清除对后面元素的影响，但父元素有浮动&#x2F;绝对定位时不需要。<br>* 清除方法：<code>给父元素指定高度、在浮动元素后面添加 clear: both、给浮动元素父元素添加 overflow: hidden/auto、底部添加伪元素 after</code>。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 清除浮动经典方法 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;       <span class="comment">/* 添加内容为空 */</span>   </span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;           <span class="comment">/* 不占空间 */</span></span><br><span class="line">  <span class="attribute">visibility</span>: hidden;  <span class="comment">/* 不可见  */</span>   </span><br><span class="line">  <span class="attribute">clear</span>: both</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;  </span><br><span class="line">  *zoom : <span class="number">1</span>;   <span class="comment">/* 兼容低版本浏览器 */</span>   </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="小知识"><a href="#小知识" class="headerlink" title="小知识"></a>小知识</h2><ul>
<li><strong>文件引入优先级</strong>：就近原则，距离相应代码近的引入方式优先级高。</li>
<li><strong>浏览器读取规则</strong>：从右向左，因为相比从左到右匹配更快、性能更优。</li>
<li><strong>元素隐藏方法</strong>：display、Opacity、visibility、hide、遮罩等。</li>
<li><strong>伪类和伪元素</strong><ul>
<li>伪类：<code>:hover、:active、:first-child</code>等用于向已有元素添加特殊效果。</li>
<li>伪元素：<code>::before、::after</code>等用于新建抽象元素并添加样式而实现特殊效果。</li>
</ul>
</li>
</ul>
<hr>
<p>以下为 HTML5 新特性：</p>
<h1 id="一、audio、video"><a href="#一、audio、video" class="headerlink" title="一、audio、video"></a>一、audio、video</h1><blockquote>
<p>支持的格式：Ogg、MP3、WAV</p>
</blockquote>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    src：地址、preload：预加载、autoplay：自动播放</span></span><br><span class="line"><span class="comment">    loop：循环播放、controls：浏览器自带的控制条 </span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">src</span>=<span class="string">&quot;music/bg.mp3&quot;</span> <span class="attr">autoplay</span>&gt;</span>不支持提示语句<span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">id</span>=<span class="string">&quot;audio&quot;</span> <span class="attr">loop</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;music/bg.ogg&quot;</span> <span class="attr">type</span>=<span class="string">&quot;audio/ogg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">source</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;music/bg.mp3&quot;</span> <span class="attr">type</span>=<span class="string">&quot;audio/mpeg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">source</span>&gt;</span></span><br><span class="line">  优先播放音乐 bg.ogg，不支持播放 bg.mp3</span><br><span class="line"><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- width/height：video 独有属性、poster：视频封面 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">&quot;video.mp4&quot;</span> <span class="attr">width</span>=<span class="string">&quot;400&quot;</span> <span class="attr">height</span>=<span class="string">&quot;300&quot;</span> <span class="attr">loop</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">preload</span>=<span class="string">&quot;auto&quot;</span> <span class="attr">poster</span>=<span class="string">&quot;video.jpg&quot;</span> <span class="attr">controls</span> <span class="attr">autobuffer</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;movie.ogg&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/ogg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">source</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&quot;movie.mp4&quot;</span> <span class="attr">type</span>=<span class="string">&quot;video/mp4&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">source</span>&gt;</span></span><br><span class="line">  您的浏览器不支持 video 标签</span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="Video"><a href="#Video" class="headerlink" title="Video"></a>Video</h2><h3 id="标签属性"><a href="#标签属性" class="headerlink" title="标签属性"></a>标签属性</h3>  <figure class="highlight abnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">src：视频的URL</span><br><span class="line">poster：视频封面，没有播放时显示的图片</span><br><span class="line">preload：预加载</span><br><span class="line">autoplay：自动播放</span><br><span class="line">loop：循环播放</span><br><span class="line">controls：浏览器自带的控制条</span><br><span class="line">width：视频宽度</span><br><span class="line">height：视频高度</span><br><span class="line"><span class="attribute">webkit-playsinline</span><span class="operator">=</span><span class="string">&quot;true&quot;</span> IOS下防止全屏播放</span><br><span class="line"><span class="attribute">playsinline</span><span class="operator">=</span><span class="string">&quot;true&quot;</span> 同上</span><br><span class="line"><span class="attribute">x-webkit-airplay</span><span class="operator">=</span><span class="string">&quot;true&quot;</span> 支持ios的AirPlay功能</span><br><span class="line"><span class="attribute">x5-video-player-type</span><span class="operator">=</span><span class="string">&quot;h5&quot;</span> 启用同层H5播放器</span><br><span class="line"><span class="attribute">x5-video-player-fullscreen</span><span class="operator">=</span><span class="string">&quot;true&quot;</span> 全屏设置</span><br><span class="line"><span class="attribute">x5-video-orientation</span><span class="operator">=</span><span class="string">&quot;portraint&quot;</span> 竖屏</span><br><span class="line"><span class="attribute">style</span><span class="operator">=</span><span class="string">&quot;object-fit:fill&quot;</span> 封面铺满</span><br><span class="line"><span class="attribute">muted</span><span class="operator">=</span><span class="string">&quot;true&quot;</span> 静音播放</span><br></pre></td></tr></table></figure>


<h3 id="标签样式"><a href="#标签样式" class="headerlink" title="标签样式"></a>标签样式</h3><blockquote>
<p>chrome 调试方式：F12、右上方三个点、setting、Perferences、勾选 Show user agent shadow Dom，然后就可以查看 video 标签的控制栏 dom 结构。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 全屏按钮</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-fullscreen-button &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 播放按钮</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-play-button &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 进度条</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-timeline &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 观看的当前时间</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-current-time-display &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 剩余时间</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-time-remaining-display &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 音量按钮</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-mute-button &#123; &#125;</span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-toggle-closed-captions-button &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 音量的控制条</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-volume-slider &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//所有控件</span></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-enclosure &#123; &#125;</span><br></pre></td></tr></table></figure>


<h3 id="对象属性"><a href="#对象属性" class="headerlink" title="对象属性"></a>对象属性</h3>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 错误状态</span></span><br><span class="line">$video.<span class="property">error</span>;      <span class="comment">// null: 正常  </span></span><br><span class="line">$video.<span class="property">error</span>.<span class="property">code</span>; <span class="comment">// 1.用户终止 2.网络错误 3.解码错误 4.URL无效 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 网络状态</span></span><br><span class="line">$video.<span class="property">currentSrc</span>;         <span class="comment">// 当前资源的 URL  </span></span><br><span class="line">$video.<span class="property">src</span> = value;        <span class="comment">// 设置当前资源的 URL  </span></span><br><span class="line">$video.<span class="title function_">canPlayType</span>(type);  <span class="comment">// 是否能播放某种格式的资源  </span></span><br><span class="line">$video.<span class="property">networkState</span>;       <span class="comment">// 视频的当前网络状态</span></span><br><span class="line">$video.<span class="property">buffered</span>;           <span class="comment">// 获取已缓冲区域</span></span><br><span class="line">$video.<span class="property">buffered</span>.<span class="title function_">end</span>(<span class="number">0</span>)     <span class="comment">// 获取最后一刻的数据</span></span><br><span class="line">$video.<span class="title function_">load</span>();             <span class="comment">// 重新加载 src 指定的资源 </span></span><br><span class="line">$video.<span class="property">preload</span>;            <span class="comment">// 是否预加载视频</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 准备状态</span></span><br><span class="line">$video.<span class="property">readyState</span>;    <span class="comment">// 视频是否已准备好播放</span></span><br><span class="line">$video.<span class="property">seeking</span>;       <span class="comment">// 是否正在寻址 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 播放状态</span></span><br><span class="line">$video.<span class="property">currentTime</span> = value; <span class="comment">// 当前播放位置  </span></span><br><span class="line">$video.<span class="property">duration</span>;            <span class="comment">// 当前资源长度  </span></span><br><span class="line">$video.<span class="property">paused</span>;              <span class="comment">// 是否暂停  </span></span><br><span class="line">$video.<span class="property">defaultPlaybackRate</span> = value;  <span class="comment">// 默认的回放速度</span></span><br><span class="line">$video.<span class="property">playbackRate</span> = value;         <span class="comment">// 当前播放速度 </span></span><br><span class="line">$video.<span class="property">seekable</span>;    <span class="comment">// 返回可以寻址的区域 </span></span><br><span class="line">$video.<span class="property">ended</span>;       <span class="comment">// 是否结束  </span></span><br><span class="line">$video.<span class="property">autoPlay</span>;    <span class="comment">// 是否自动播放  </span></span><br><span class="line">$video.<span class="property">loop</span>;        <span class="comment">// 是否循环播放  </span></span><br><span class="line">$video.<span class="title function_">play</span>();      <span class="comment">// 播放  </span></span><br><span class="line">$video.<span class="title function_">pause</span>();     <span class="comment">//暂停  </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 相关控制</span></span><br><span class="line">$video.<span class="property">controls</span>;         <span class="comment">// 是否有默认控制条  </span></span><br><span class="line">$video.<span class="property">volume</span> = value;   <span class="comment">// 音量  </span></span><br><span class="line">$video.<span class="property">muted</span> = value;    <span class="comment">// 静音</span></span><br></pre></td></tr></table></figure>


<h3 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h3>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">loadstart         <span class="comment">// 客户端开始请求数据  </span></span><br><span class="line">*progress         <span class="comment">// 客户端正在请求数据  </span></span><br><span class="line">suspend           <span class="comment">// 延迟下载  </span></span><br><span class="line">abort             <span class="comment">// 客户端主动终止下载（不是因为错误引起） </span></span><br><span class="line">*error            <span class="comment">// 请求数据时遇到错误  </span></span><br><span class="line">stalled           <span class="comment">// 网速失速  </span></span><br><span class="line">*play             <span class="comment">// 开始播放时触发  </span></span><br><span class="line">*pause            <span class="comment">// 暂停时触发  </span></span><br><span class="line">loadedmetadata    <span class="comment">// 成功获取资源长度  </span></span><br><span class="line">*waiting          <span class="comment">// 等待数据，并非错误  </span></span><br><span class="line">*playing          <span class="comment">// 开始回放  </span></span><br><span class="line">canplay           <span class="comment">// 可以播放，但中途可能因为加载而暂停  </span></span><br><span class="line">*canplaythrough   <span class="comment">// 可以播放  </span></span><br><span class="line">seeking           <span class="comment">// 资源寻找中  </span></span><br><span class="line">seeked            <span class="comment">// 资源寻找完毕  </span></span><br><span class="line">*timeupdate       <span class="comment">// 播放时间改变  </span></span><br><span class="line">*ended            <span class="comment">// 播放结束  </span></span><br><span class="line">ratechange        <span class="comment">// 播放速率改变  </span></span><br><span class="line">durationchange    <span class="comment">// 资源长度改变  </span></span><br><span class="line">*volumechange     <span class="comment">// 音量改变         </span></span><br></pre></td></tr></table></figure>


<h2 id="自动播放"><a href="#自动播放" class="headerlink" title="自动播放"></a>自动播放</h2><blockquote>
<p>ios、Android、微信为了节省流量而规定忽视 autoplay 属性。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ios、Android：循环播放失效时方案相似</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;touchstart&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;audio&#x27;</span>).<span class="title function_">play</span>();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 微信</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;WeixinJSBridgeReady&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;audios&#x27;</span>).<span class="title function_">play</span>()</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 针对苹果的手机微信端</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">autoPlayVideo</span>(<span class="params"></span>)&#123;</span><br><span class="line">  wx.<span class="title function_">config</span>(&#123;</span><br><span class="line">    <span class="attr">debug</span>:<span class="literal">false</span>,</span><br><span class="line">    <span class="attr">appId</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">timestamp</span>:<span class="number">1</span>,</span><br><span class="line">    <span class="attr">nonceStr</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">signature</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">jsApiList</span>:[]</span><br><span class="line">  &#125;)</span><br><span class="line">  wx.<span class="title function_">ready</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> autoplayVideo = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;audio&quot;</span>);</span><br><span class="line">    autoplayVideo.<span class="title function_">play</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="用户权限"><a href="#用户权限" class="headerlink" title="用户权限"></a>用户权限</h2><blockquote>
<p>navigator.getUserMedia 可以提示用户需要权限去使用像摄像头、麦克风等媒体设备。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 兼容写法</span></span><br><span class="line">navigator.<span class="property">getMedia</span> = (navigator.<span class="property">getUserMedia</span> ||</span><br><span class="line">  navigator.<span class="property">webkitGetUserMedia</span> ||</span><br><span class="line">  navigator.<span class="property">mozGetUserMedia</span> ||</span><br><span class="line">  navigator.<span class="property">msGetUserMedia</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取用户摄像头并提供拍照功能：video、canvas、button</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;DOMContentLoaded&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 获取元素，创建设置等等</span></span><br><span class="line">  <span class="keyword">var</span> canvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;canvas&quot;</span>),</span><br><span class="line">  context = canvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>),</span><br><span class="line">  video = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;video&quot;</span>),</span><br><span class="line">  videoObj = &#123; <span class="string">&quot;video&quot;</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">  errBack = <span class="keyword">function</span>(<span class="params">error</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Video capture error: &quot;</span>, error.<span class="property">code</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 添加 video 监听器</span></span><br><span class="line">  <span class="keyword">if</span>(navigator.<span class="property">getUserMedia</span>) &#123; <span class="comment">// 标准</span></span><br><span class="line">      navigator.<span class="title function_">getUserMedia</span>(videoObj, <span class="keyword">function</span>(<span class="params">stream</span>) &#123;</span><br><span class="line">          video.<span class="property">src</span> = stream;</span><br><span class="line">          video.<span class="title function_">play</span>();</span><br><span class="line">      &#125;, errBack);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>(navigator.<span class="property">webkitGetUserMedia</span>) &#123; <span class="comment">// WebKit 前缀</span></span><br><span class="line">      navigator.<span class="title function_">webkitGetUserMedia</span>(videoObj, <span class="keyword">function</span>(<span class="params">stream</span>)&#123;</span><br><span class="line">          video.<span class="property">src</span> = <span class="variable language_">window</span>.<span class="property">webkitURL</span>.<span class="title function_">createObjectURL</span>(stream);</span><br><span class="line">          video.<span class="title function_">play</span>();</span><br><span class="line">      &#125;, errBack);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">if</span>(navigator.<span class="property">mozGetUserMedia</span>) &#123;    <span class="comment">// Firefox 前缀</span></span><br><span class="line">      navigator.<span class="title function_">mozGetUserMedia</span>(videoObj, <span class="keyword">function</span>(<span class="params">stream</span>)&#123;</span><br><span class="line">          video.<span class="property">src</span> = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(stream);</span><br><span class="line">          video.<span class="title function_">play</span>();</span><br><span class="line">      &#125;, errBack);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;snap&quot;</span>).<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      context.<span class="title function_">drawImage</span>(video, <span class="number">0</span>, <span class="number">0</span>, <span class="number">640</span>, <span class="number">480</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">&#125;, <span class="literal">false</span>)</span><br></pre></td></tr></table></figure>


<h1 id="二、Canvas"><a href="#二、Canvas" class="headerlink" title="二、Canvas"></a>二、Canvas</h1><blockquote>
<p>提供了一系列绘图方法的对象。</p>
</blockquote>
<h2 id="绘制图形"><a href="#绘制图形" class="headerlink" title="绘制图形"></a>绘制图形</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> canvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;canvas&quot;</span>); </span><br><span class="line"><span class="keyword">if</span>(canvas.<span class="property">getContext</span>)&#123;</span><br><span class="line">  <span class="keyword">let</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>); </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 线段 </span></span><br><span class="line">ctx.<span class="title function_">moveTo</span>(<span class="number">100</span>, <span class="number">20</span>); </span><br><span class="line">ctx.<span class="title function_">lineTo</span>(<span class="number">200</span>, <span class="number">40</span>);</span><br><span class="line">ctx.<span class="property">lineWidth</span> = <span class="number">5</span>; </span><br><span class="line">ctx.<span class="property">strokeStyle</span> = <span class="string">&#x27;#CC0000&#x27;</span>; </span><br><span class="line">ctx.<span class="title function_">stroke</span>();    <span class="comment">// 绘制</span></span><br><span class="line"></span><br><span class="line">ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">ctx.<span class="property">strokeStyle</span> = <span class="string">&quot;#ff0000&quot;</span>;</span><br><span class="line">ctx.<span class="title function_">lineTo</span>(<span class="number">20</span>, <span class="number">20</span>);</span><br><span class="line">ctx.<span class="title function_">lineTo</span>(<span class="number">20</span>, <span class="number">70</span>);</span><br><span class="line">ctx.<span class="title function_">lineTo</span>(<span class="number">70</span>, <span class="number">70</span>);</span><br><span class="line">ctx.<span class="title function_">closePath</span>();</span><br><span class="line">ctx.<span class="title function_">stroke</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 路径：填充</span></span><br><span class="line">ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">ctx.<span class="title function_">arc</span>(<span class="number">240</span>, <span class="number">20</span>, <span class="number">50</span>, <span class="number">0</span>, <span class="title class_">Math</span>.<span class="property">PI</span>/<span class="number">2</span> , <span class="literal">false</span>);</span><br><span class="line">ctx.<span class="title function_">closePath</span>();</span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&#x27;#0000ff&#x27;</span>;</span><br><span class="line">ctx.<span class="title function_">fill</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 路径：填充 + 边框</span></span><br><span class="line">ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">ctx.<span class="title function_">arc</span>(<span class="number">300</span>, <span class="number">20</span>, <span class="number">50</span>, <span class="number">0</span>, <span class="title class_">Math</span>.<span class="property">PI</span>/<span class="number">2</span> , <span class="literal">false</span>);</span><br><span class="line">ctx.<span class="property">strokeStyle</span> = <span class="string">&#x27;#0000ff&#x27;</span>;</span><br><span class="line">ctx.<span class="title function_">closePath</span>();</span><br><span class="line">ctx.<span class="title function_">stroke</span>();</span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&#x27;rgba(0,0,255,0.2)&#x27;</span>;</span><br><span class="line">ctx.<span class="title function_">fill</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 贝塞尔曲线</span></span><br><span class="line">ctx.<span class="title function_">moveTo</span>(<span class="number">300</span>, <span class="number">300</span>);</span><br><span class="line">ctx.<span class="property">lineWidth</span> = <span class="number">10</span>;</span><br><span class="line">ctx.<span class="property">strokeStyle</span> = <span class="string">&quot;skyblue&quot;</span>;</span><br><span class="line">ctx.<span class="title function_">bezierCurveTo</span>(<span class="number">300</span>, <span class="number">50</span>, <span class="number">500</span>, <span class="number">50</span>, <span class="number">150</span>, <span class="number">150</span>);</span><br><span class="line">ctx.<span class="title function_">stroke</span>();</span><br><span class="line">      </span><br><span class="line"></span><br><span class="line"><span class="comment">// 蓝色填充矩形</span></span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&quot;#0000ff&quot;</span>;</span><br><span class="line">ctx.<span class="title function_">fillRect</span>(<span class="number">20</span>, <span class="number">100</span>, <span class="number">60</span>, <span class="number">60</span>);    </span><br><span class="line"></span><br><span class="line"><span class="comment">// 红色边框矩形</span></span><br><span class="line">ctx.<span class="property">lineWidth</span> = <span class="number">10</span>; </span><br><span class="line">ctx.<span class="title function_">strokeRect</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">60</span>, <span class="number">60</span>);  </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 圆</span></span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&quot;#0000ff&quot;</span>;</span><br><span class="line">ctx.<span class="property">strokeStyle</span> = <span class="string">&quot;#ff0000&quot;</span>;</span><br><span class="line">ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">ctx.<span class="title function_">arc</span>(<span class="number">50</span>, <span class="number">240</span>, <span class="number">40</span>, <span class="number">0</span>, <span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>, <span class="literal">true</span>);</span><br><span class="line">ctx.<span class="title function_">closePath</span>();</span><br><span class="line">ctx.<span class="title function_">stroke</span>();</span><br><span class="line">ctx.<span class="title function_">fill</span>();</span><br><span class="line"></span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&quot;pink&quot;</span>;</span><br><span class="line">ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">ctx.<span class="title function_">arc</span>(<span class="number">50</span>, <span class="number">240</span>, <span class="number">20</span>, <span class="number">0</span>, <span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>, <span class="literal">true</span>);</span><br><span class="line">ctx.<span class="title function_">closePath</span>();</span><br><span class="line">ctx.<span class="title function_">fill</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 文本</span></span><br><span class="line">ctx.<span class="property">font</span> = <span class="string">&quot;Bold 20px Arial&quot;</span>; </span><br><span class="line">ctx.<span class="property">textAlign</span> = <span class="string">&quot;left&quot;</span>;</span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&quot;#008600&quot;</span>; </span><br><span class="line">ctx.<span class="title function_">fillText</span>(<span class="string">&quot;Hello!&quot;</span>, <span class="number">10</span>, <span class="number">50</span>); </span><br><span class="line">ctx.<span class="title function_">strokeText</span>(<span class="string">&quot;Hello!&quot;</span>, <span class="number">10</span>, <span class="number">100</span>); </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 渐变色</span></span><br><span class="line"><span class="keyword">var</span> grd = ctx.<span class="title function_">createLinearGradient</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">300</span>, <span class="number">200</span>);</span><br><span class="line">grd.<span class="title function_">addColorStop</span>(<span class="number">0</span>,<span class="string">&quot;#ff0000&quot;</span>);</span><br><span class="line">grd.<span class="title function_">addColorStop</span>(<span class="number">1</span>,<span class="string">&quot;#0000ff&quot;</span>);</span><br><span class="line">ctx.<span class="property">fillStyle</span> = grd;</span><br><span class="line">ctx.<span class="title function_">fillRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">300</span>,<span class="number">200</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 阴影</span></span><br><span class="line">ctx.<span class="property">shadowOffsetX</span> = <span class="number">10</span>; </span><br><span class="line">ctx.<span class="property">shadowOffsetY</span> = <span class="number">10</span>; </span><br><span class="line">ctx.<span class="property">shadowBlur</span> = <span class="number">5</span>; </span><br><span class="line">ctx.<span class="property">shadowColor</span> = <span class="string">&quot;rgba(0,0,0,0.5)&quot;</span>; </span><br><span class="line">ctx.<span class="property">fillStyle</span> = <span class="string">&quot;#CC0000&quot;</span>; </span><br><span class="line">ctx.<span class="title function_">fillRect</span>(<span class="number">10</span>, <span class="number">10</span>, <span class="number">200</span>, <span class="number">100</span>);</span><br></pre></td></tr></table></figure>


<h2 id="绘制图像"><a href="#绘制图像" class="headerlink" title="绘制图像"></a>绘制图像</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// canvas id=&quot;canvas&quot; width=&quot;400&quot; height=&quot;400&quot;</span></span><br><span class="line"><span class="keyword">let</span> canvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;canvas&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> image = <span class="keyword">new</span> <span class="title class_">Image</span>();</span><br><span class="line">image.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    </span><br><span class="line">  <span class="comment">// 图片绘制</span></span><br><span class="line">  <span class="comment">// ctx.drawImage(image, 0, 0)</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 图片裁剪</span></span><br><span class="line">  ctx.<span class="title function_">beginPath</span>(); </span><br><span class="line">  ctx.<span class="title function_">arc</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">100</span>, <span class="number">0</span>, <span class="title class_">Math</span>.<span class="property">PI</span>*<span class="number">2</span>, <span class="literal">true</span>); </span><br><span class="line">  ctx.<span class="title function_">clip</span>();          </span><br><span class="line">  ctx.<span class="title function_">drawImage</span>(image, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line">image.<span class="property">src</span> = <span class="string">&#x27;./mobile-type.png&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取图片保存地址</span></span><br><span class="line"><span class="keyword">let</span> src = canvas.<span class="title function_">toDataURL</span>(<span class="string">&#x27;image/png&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h2 id="动画效果"><a href="#动画效果" class="headerlink" title="动画效果"></a>动画效果</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> y = <span class="number">15</span>;</span><br><span class="line"><span class="keyword">var</span> speed = <span class="number">5</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">animation</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(animate);</span><br><span class="line">  x += speed;</span><br><span class="line">  <span class="keyword">if</span>(x &lt;= <span class="number">0</span> || x &gt;= <span class="number">475</span>)&#123;</span><br><span class="line">      speed = -speed;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">draw</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">draw</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> canvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;canvas&quot;</span>);</span><br><span class="line">  <span class="keyword">var</span> context = canvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>);</span><br><span class="line">  context.<span class="title function_">clearRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">500</span>, <span class="number">170</span>);</span><br><span class="line">  context.<span class="property">fillStyle</span> = <span class="string">&quot;#ff00ff&quot;</span>;</span><br><span class="line">  context.<span class="title function_">fillRect</span>(x, y, <span class="number">25</span>, <span class="number">25</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">animation</span>()</span><br></pre></td></tr></table></figure>


<h2 id="像素处理"><a href="#像素处理" class="headerlink" title="像素处理"></a>像素处理</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取图像数据</span></span><br><span class="line"><span class="keyword">let</span> imgData = ctx.<span class="title function_">getImageData</span>(<span class="number">0</span>, <span class="number">0</span>, canvas.<span class="property">width</span>, canvas.<span class="property">height</span>)</span><br><span class="line">    </span><br><span class="line"><span class="comment">// 处理图像数据</span></span><br><span class="line"><span class="title function_">filter</span>(imageData);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 重新绘制图像</span></span><br><span class="line">ctx.<span class="title function_">putImageData</span>(imageData, <span class="number">0</span>, <span class="number">0</span>)</span><br></pre></td></tr></table></figure>


<h1 id="三、WebSocket"><a href="#三、WebSocket" class="headerlink" title="三、WebSocket"></a>三、WebSocket</h1>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> socket = <span class="keyword">new</span> <span class="title class_">WebSocket</span>(<span class="string">&#x27;ws://localhost:8080&#x27;</span>);</span><br><span class="line"></span><br><span class="line">socket.<span class="property">onopen</span> = <span class="keyword">function</span>(<span class="params">event</span>) &#123;</span><br><span class="line">  socket.<span class="title function_">send</span>(<span class="string">&#x27;hello HTML5&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  socket.<span class="property">onmessage</span> = <span class="keyword">function</span>(<span class="params">event</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;receive a message&#x27;</span>, event)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  socket.<span class="property">onclose</span> = <span class="keyword">function</span>(<span class="params">ev</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;socket has closed&#x27;</span>, event)</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  socket.<span class="title function_">close</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="四、Web-Worker"><a href="#四、Web-Worker" class="headerlink" title="四、Web Worker"></a>四、Web Worker</h1><h2 id="机制"><a href="#机制" class="headerlink" title="机制"></a>机制</h2><ul>
<li>在当前 js 的主线程中，通过 Worker 类加载一个 js 文件来开辟一个新的线程</li>
<li>新线程可以加载 JS 进行大量的复杂运算，同时主线程不需要挂起等待而是执行其它代码</li>
<li>新线程创建时，它的脚本文件生成的两个对象和一套 API 可以实现主线程和子线程的数据通信<ul>
<li><strong>worker 对象</strong>：主线程脚本中通过构造函数显式创建，通过实例方法获取</li>
<li><strong>WorkerGlobalScope 对象</strong>：子线程脚本中隐式创建的全局对象，通过 this 获取</li>
<li><strong>API 接口</strong>：主线程和子线程脚本间进行数据传输的接口，主要为 postMessage、onmessage</li>
</ul>
</li>
</ul>
<h2 id="Web-主线程"><a href="#Web-主线程" class="headerlink" title="Web 主线程"></a>Web 主线程</h2><ol>
<li>创建新线程：<code>var worker = new Worker(url)</code></li>
<li>发送数据：<code>worker.postMessage(data)</code></li>
<li>接收数据：<code>worker.onmessage = fn</code></li>
<li>结束新线程：<code>worker.terminate()</code></li>
</ol>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 判断当前浏览器是否支持 web worker</span></span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> (<span class="title class_">Worker</span>) != <span class="string">&quot;undefined&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> (w) == <span class="string">&quot;undefined&quot;</span>) &#123;       </span><br><span class="line">        w = <span class="keyword">new</span> <span class="title class_">Worker</span>(<span class="string">&quot;webworker.js&quot;</span>); </span><br><span class="line">    &#125;  </span><br><span class="line">    <span class="comment">// 事件处理函数，用来处理后端的 web worker 传递的消息  </span></span><br><span class="line">    w.<span class="property">onmessage</span> = <span class="keyword">function</span> (<span class="params">event</span>) &#123; </span><br><span class="line">        <span class="comment">// do something</span></span><br><span class="line">    &#125;;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123; </span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 加载一个 JS 文件来创建一个 worker，同时返回一个 worker 实例</span></span><br><span class="line"><span class="keyword">var</span> worker = <span class="keyword">new</span> <span class="title class_">Worker</span>(<span class="string">&quot;worker.js&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 向 worker 发送数据</span></span><br><span class="line">worker.<span class="title function_">postMessage</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 接收 worker 发送的数据</span></span><br><span class="line">worker.<span class="property">onmessage</span> = <span class="keyword">function</span>(<span class="params">event</span>)&#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异常处理</span></span><br><span class="line">worker.<span class="property">onerror</span> = <span class="keyword">function</span>(<span class="params">err</span>)&#123;</span><br><span class="line">  <span class="comment">// 错误所在的代码文件和行数、错误信息</span></span><br><span class="line">  <span class="title function_">alert</span>(<span class="string">&quot;Line #&quot;</span> + err.<span class="property">lineno</span> + <span class="string">&quot; - &quot;</span> + err.<span class="property">message</span> + <span class="string">&quot; in &quot;</span> + err.<span class="property">filename</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 结束 worker</span></span><br><span class="line">worker.<span class="title function_">terminate</span>()  </span><br></pre></td></tr></table></figure>
<h2 id="worker-新线程"><a href="#worker-新线程" class="headerlink" title="worker 新线程"></a>worker 新线程</h2><blockquote>
<p>全局变量 this 省略</p>
</blockquote>
<ol>
<li>发送数据：<code>postMessage(data)</code></li>
<li>接收数据：<code>onmessage = fn</code></li>
<li>加载脚本：<code>importScripts(&#39;a.js&#39;, &#39;b.js&#39;)</code></li>
<li>结束自身：<code>self.close()</code></li>
</ol>
<h2 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h2><ul>
<li>用来进行处理大量的复杂计算而不挂起主线程。</li>
<li>可以在 worker 中通过 <code>importScripts(url) </code>加载其它脚本文件。</li>
<li>可以使用 <code>setTimeout、clearTimeout、setInterval、clearInterval</code>。</li>
<li>可以使用 <code>XMLHttpRequest</code> 来发送请求。</li>
<li>可以访问 <code>navigator、location</code> 对象。</li>
</ul>
<h2 id="操作限制"><a href="#操作限制" class="headerlink" title="操作限制"></a>操作限制</h2><blockquote>
<p>Worker 线程脚本</p>
</blockquote>
<ul>
<li><strong>脚本限制</strong>：无法调用 alert、confirm 等函数。</li>
<li><strong>同源限制</strong>：不能跨域加载脚本文件，它必须与主线程的脚本文件同源。</li>
<li><strong>通信限制</strong>：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信。</li>
<li><strong>文件限制</strong>：无法读取本地文件，所加载的脚本必须 来自网络或通过服务器打开。</li>
<li><strong>DOM 限制</strong>：无法访问 DOM 节点、无法访问 window、document 等全局变量。</li>
</ul>
<h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><ul>
<li><strong>专用线程</strong>：只能被创建它的页面访问，随当前页面的关闭而结束，通信通过 onmessage()、postmessage()。</li>
<li><strong>共享线程</strong>：可以被多个页面访问，connect 后通过 port 属性实现通信。</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ---------- 专用线程 -----------</span></span><br><span class="line"><span class="comment">// 主线程 index.html/script</span></span><br><span class="line"><span class="keyword">var</span> worker = <span class="keyword">new</span> <span class="title class_">Worker</span>(<span class="string">&quot;worker.js&quot;</span>); </span><br><span class="line">worker.<span class="title function_">postMessage</span>(<span class="string">&quot;hello world&quot;</span>);      <span class="comment">// 发送数据</span></span><br><span class="line">worker.<span class="property">onmessage</span> = <span class="keyword">function</span> (<span class="params">event</span>) &#123;   <span class="comment">// 接收数据</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">data</span>);             </span><br><span class="line">  worker.<span class="title function_">terminate</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 子线程：worker.js </span></span><br><span class="line">onmessage = <span class="keyword">function</span> (<span class="params">event</span>)&#123;          <span class="comment">// 接收数据</span></span><br><span class="line">  <span class="keyword">var</span> d = event.<span class="property">data</span>;    </span><br><span class="line">  <span class="title function_">postMessage</span>(<span class="string">&quot;已收到：&quot;</span> + d);        <span class="comment">// 发送数据</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过服务器打开文件：直接打开会报错</span></span><br><span class="line">live-server</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------- 共享线程 -----------</span></span><br><span class="line"><span class="comment">// 主线程 </span></span><br><span class="line">worker.<span class="property">port</span>.<span class="property">onmessage</span> = <span class="keyword">function</span>(<span class="params">e</span>)&#123;&#125;</span><br><span class="line">worker.<span class="property">port</span>.<span class="title function_">postMessage</span>(<span class="string">&#x27;data&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 子线程 </span></span><br><span class="line"><span class="title function_">addEventListener</span>(<span class="string">&#x27;connect&#x27;</span>, <span class="keyword">function</span>(<span class="params">event</span>)&#123;</span><br><span class="line">  <span class="keyword">var</span> port = event.<span class="property">ports</span>[<span class="number">0</span>]</span><br><span class="line">  <span class="comment">// 接收</span></span><br><span class="line">  port.<span class="property">onmessage</span> = <span class="keyword">function</span>(<span class="params">event</span>)&#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">data</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="comment">// 发送</span></span><br><span class="line">  port.<span class="title function_">postMessage</span>(<span class="string">&quot;data&quot;</span>);</span><br><span class="line">  port.<span class="title function_">start</span>();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h1 id="五、拖放操作"><a href="#五、拖放操作" class="headerlink" title="五、拖放操作"></a>五、拖放操作</h1><h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><blockquote>
<p>事件对象为 被拖拽的元素、放置的目标元素 (拖放范围)。</p>
</blockquote>
<ul>
<li>拖拽元素：dragstart、drag、dragend</li>
<li>目标元素：dragenter、dragover (拖拽)、dragleave (拖出)、drop (拖入后释放鼠标)</li>
<li>执行顺序：drop 是否触发分类<ul>
<li>触发：<code>dragstart、drag、dragenter、dragover、drop、dragend</code></li>
<li>不触发：<code>dragstart、drag、dragenter、dragover、dragleave、dragend</code></li>
</ul>
</li>
</ul>
<h2 id="dataTransfer-对象"><a href="#dataTransfer-对象" class="headerlink" title="dataTransfer 对象"></a>dataTransfer 对象</h2><blockquote>
<p>拖动时回调函数接受的事件参数。注意火狐浏览器下必须设置它的 setData 方法才可以拖拽除图片外的其他标签。</p>
</blockquote>
<ul>
<li>属性：dropEffect(元素行为和相应光标)、effectAllowed(允许拖动元素的光标样式)、files(被拖放的文件对象)。</li>
<li>方法：getData、setData、clearData、setDragImage(指定拖动时显示的图像)、addElement(添加被拖拽元素)。</li>
</ul>
<h2 id="拖拽上传预览图片"><a href="#拖拽上传预览图片" class="headerlink" title="拖拽上传预览图片"></a>拖拽上传预览图片</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="keyword">var</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;list&#x27;</span>);</span><br><span class="line">  <span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;box&#x27;</span>);</span><br><span class="line">  box.<span class="property">ondragenter</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">innerHTML</span> = <span class="string">&#x27;可以释放&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  box.<span class="property">ondragover</span> = <span class="keyword">function</span>(<span class="params">e</span>)&#123;</span><br><span class="line">    e.<span class="title function_">preventDefault</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  box.<span class="property">ondragleave</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">innerHTML</span> = <span class="string">&#x27;请拖拽到此区域&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  box.<span class="property">ondrop</span> = <span class="keyword">function</span>(<span class="params">event</span>)&#123;</span><br><span class="line">    <span class="comment">// 连续触发事件阻止冒泡</span></span><br><span class="line">    event.<span class="title function_">preventDefault</span>(); </span><br><span class="line"></span><br><span class="line">    <span class="comment">// 获取数据对象</span></span><br><span class="line">    <span class="keyword">var</span> fs = event.<span class="property">dataTransfer</span>.<span class="property">files</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i &gt; fs.<span class="property">length</span>; i++)&#123;</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 读取文件信息的接口对象</span></span><br><span class="line">      <span class="keyword">var</span> fr = <span class="keyword">new</span> <span class="title class_">FileReader</span>();  </span><br><span class="line">      <span class="keyword">if</span>( fs[i].<span class="property">type</span>.<span class="title function_">indexOf</span>(<span class="string">&#x27;image&#x27;</span>)!=-<span class="number">1</span> )&#123;</span><br><span class="line">          fr.<span class="title function_">readAsDataURL</span>( fs[i] );</span><br><span class="line">          fr.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="keyword">var</span> oLi = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">            <span class="keyword">var</span> oImg = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line">            oImg.<span class="property">src</span> = <span class="variable language_">this</span>.<span class="property">result</span>;</span><br><span class="line">            oLi.<span class="title function_">appendChild</span>( oImg );</span><br><span class="line">            list.<span class="title function_">appendChild</span>( oLi );</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">          <span class="title function_">alert</span>(<span class="string">&#x27;请拖放图片指定格式&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="六、地理定位"><a href="#六、地理定位" class="headerlink" title="六、地理定位"></a>六、地理定位</h1><blockquote>
<p>常用的地理位置定位方式：HTML5、百度地图、高德地图。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// HTML5 定位</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getLocation</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> options = &#123;</span><br><span class="line">    <span class="attr">enableHighAccuracy</span>: <span class="literal">true</span>,  <span class="comment">// 是否要求高精度</span></span><br><span class="line">    <span class="attr">maximumAge</span>: <span class="number">1000</span>           <span class="comment">// 应用缓存时间</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (navigator.<span class="property">geolocation</span>) &#123;</span><br><span class="line">      navigator.<span class="property">geolocation</span>.<span class="title function_">getCurrentPosition</span>(<span class="function"><span class="params">position</span> =&gt;</span>  &#123;</span><br><span class="line">        <span class="keyword">var</span> latitude = position.<span class="property">coords</span>.<span class="property">latitude</span>;    </span><br><span class="line">        <span class="keyword">var</span> longitude = position.<span class="property">coords</span>.<span class="property">longitude</span>;  </span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`纬度：<span class="subst">$&#123;latitude&#125;</span>, 经度：<span class="subst">$&#123;longitude&#125;</span>`</span>)</span><br><span class="line"></span><br><span class="line">      &#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line">        <span class="comment">// 常见错误：需要用户授权、仅限 HTTPS、需要翻墙 (谷歌浏览器)</span></span><br><span class="line">      &#125;, options);</span><br><span class="line"></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 浏览器不支持</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 百度地图：申请密钥之后以参数形式引入，然后即可调用</span></span><br><span class="line"><span class="comment">// script src=&quot;http://api.map.baidu.com/api?v=2.0&amp;ak=zbLUqlSrM&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="title class_">BMap</span>.<span class="title class_">Map</span>(<span class="string">&quot;allmap&quot;</span>); <span class="comment">// 创建Map实例</span></span><br><span class="line"><span class="keyword">var</span> point = <span class="keyword">new</span> <span class="title class_">BMap</span>.<span class="title class_">Point</span>(<span class="number">116.404</span>, <span class="number">39.915</span>)</span><br><span class="line">map.<span class="title function_">centerAndZoom</span>(point, <span class="number">15</span>)   <span class="comment">// 初始化地图，设置中心点坐标和地图级别</span></span><br><span class="line"><span class="comment">// map.centerAndZoom(&quot;上海&quot;,15)</span></span><br><span class="line"></span><br><span class="line">map.<span class="title function_">addControl</span>(<span class="keyword">new</span> <span class="title class_">BMap</span>.<span class="title class_">MapTypeControl</span>())    <span class="comment">// 添加地图类型控件</span></span><br><span class="line">map.<span class="title function_">setCurrentCity</span>(<span class="string">&quot;北京&quot;</span>)                   <span class="comment">// 设置地图显示的城市</span></span><br><span class="line">map.<span class="title function_">enableScrollWheelZoom</span>(<span class="literal">true</span>)             <span class="comment">// 开启鼠标滚轮缩放</span></span><br></pre></td></tr></table></figure>


<h1 id="七、全屏模式"><a href="#七、全屏模式" class="headerlink" title="七、全屏模式"></a>七、全屏模式</h1>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 启动全屏模式  </span></span><br><span class="line"><span class="title function_">launchFullScreen</span>(<span class="variable language_">document</span>.<span class="property">documentElement</span>);   <span class="comment">// 整个页面  </span></span><br><span class="line"><span class="title function_">launchFullScreen</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;video&quot;</span>)); <span class="comment">// 单独元素 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 取消全屏  </span></span><br><span class="line"><span class="title function_">cancelFullscreen</span>(); </span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">launchFullScreen</span>(<span class="params">element</span>) &#123;  </span><br><span class="line">  <span class="keyword">if</span>(element.<span class="property">requestFullScreen</span>) &#123;  </span><br><span class="line">      element.<span class="title function_">requestFullScreen</span>();  </span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>(element.<span class="property">mozRequestFullScreen</span>) &#123;  </span><br><span class="line">      element.<span class="title function_">mozRequestFullScreen</span>();  </span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>(element.<span class="property">webkitRequestFullScreen</span>) &#123;  </span><br><span class="line">      element.<span class="title function_">webkitRequestFullScreen</span>();  </span><br><span class="line">  &#125;  </span><br><span class="line">&#125;  </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">cancelFullscreen</span>(<span class="params"></span>) &#123;  </span><br><span class="line">  <span class="keyword">if</span>(<span class="variable language_">document</span>.<span class="property">cancelFullScreen</span>) &#123;  </span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">cancelFullScreen</span>();  </span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>(<span class="variable language_">document</span>.<span class="property">mozCancelFullScreen</span>) &#123;  </span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">mozCancelFullScreen</span>();  </span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>(<span class="variable language_">document</span>.<span class="property">webkitCancelFullScreen</span>) &#123;  </span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">webkitCancelFullScreen</span>();  </span><br><span class="line">  &#125;  </span><br><span class="line">&#125;  </span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 全屏元素</span></span><br><span class="line"><span class="keyword">var</span> fullscreenEle = <span class="variable language_">document</span>.<span class="property">fullscreenElement</span> ||</span><br><span class="line">                    <span class="variable language_">document</span>.<span class="property">mozFullScreenElement</span> ||</span><br><span class="line">                    <span class="variable language_">document</span>.<span class="property">webkitFullscreenElement</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 是否全屏</span></span><br><span class="line"><span class="keyword">var</span> isFullscreen = <span class="variable language_">document</span>.<span class="property">fullscreenEnabled</span> ||</span><br><span class="line">                    <span class="variable language_">window</span>.<span class="property">fullScreen</span> ||</span><br><span class="line">                    <span class="variable language_">document</span>.<span class="property">webkitIsFullScreen</span> ||</span><br><span class="line">                    <span class="variable language_">document</span>.<span class="property">msFullscreenEnabled</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 全屏事件</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;fullscreenchange&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123; &#125;)</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;fullscreenerror&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123; &#125;)</span><br></pre></td></tr></table></figure>
<h1 id="八、数据储存"><a href="#八、数据储存" class="headerlink" title="八、数据储存"></a>八、数据储存</h1><blockquote>
<p>客户端存储方式：localStorage、sessionStorage、cookie、UserData、webSQL、IndexedDB、HTML5 离线存储等。</p>
</blockquote>
<h2 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h2><blockquote>
<p>随着每次 http 请求头信息一起发送，无形中增加了网络流量，而且能存储的数据容量较小，适用于购物车、客户端登录等场景</p>
</blockquote>
<ul>
<li>优点：可控制过期时间、可扩展和可用性比较好、可加密而减少被破解的可能性。</li>
<li>缺点：在请求头上携带数据而安全性差、数量和长度有限制(最多 20 条、最长 40k)。</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">setCookie</span>(<span class="params">key, value, expireTime</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> cookie = key + <span class="string">&#x27;=&#x27;</span> + <span class="built_in">encodeURIComponent</span>(value);</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> expireTime !== <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> expire = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">        expire.<span class="title function_">setTime</span>(expire.<span class="title function_">getTime</span>() + expireTime);</span><br><span class="line">        cookie += <span class="string">&#x27;;expires=&#x27;</span> + expire.<span class="title function_">toUTCString</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">cookie</span> = cookie + <span class="string">&#x27;;domain=&#x27;</span> + location.<span class="property">hostname</span></span><br><span class="line">    + <span class="string">&#x27;;path=/&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getCookie</span>(<span class="params">key</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">cookie</span>.<span class="title function_">indexOf</span>(key) &lt; <span class="number">0</span>) &#123; <span class="keyword">return</span>; &#125;</span><br><span class="line">    <span class="keyword">var</span> cookies = <span class="variable language_">document</span>.<span class="property">cookie</span>.<span class="title function_">split</span>(<span class="string">&quot;;&quot;</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;cookies.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> temp = cookies[i].<span class="title function_">split</span>(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">        <span class="keyword">if</span> (temp[<span class="number">0</span>].<span class="title function_">replace</span>(<span class="regexp">/\s/g</span>, <span class="string">&#x27;&#x27;</span>) == key) &#123;</span><br><span class="line">           <span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>(temp[<span class="number">1</span>]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">delCookie</span>(<span class="params">key</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setCookie</span>(key, <span class="string">&#x27;&#x27;</span>, -<span class="number">1</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h2><blockquote>
<p>本地存储方式可以长期存储数据，没有时间限制，而且可以储存电话本等大量数据。</p>
</blockquote>
<ul>
<li>特点：同源策略限制、只在本地存储、永久保存、同浏览器共享。</li>
<li>优点<ul>
<li>扩展了 cookie 的 4k 限制。</li>
<li>可以将请求数据直接存储到本地，节约带宽。</li>
<li>遵循同源策略，不同网站之间不能直接共用。</li>
</ul>
</li>
<li>缺点<ul>
<li>需要手动删除，否则长期存在。</li>
<li>浏览器大小不一，版本的支持也不一样。</li>
<li>只支持存储 string 类型的数据，JSON 对象需要转换。</li>
<li>本质是对字符串的读取，如果存储内容多则会消耗内存空间而导致页面变卡。</li>
</ul>
</li>
<li>应用场景<ul>
<li>多页面访问共同数据：可以在多个标签页中共享数据。</li>
<li>数据比较大的临时保存方案：比如在线编辑文章时的自动保存。</li>
</ul>
</li>
<li>API<ul>
<li>存储：<code>localStorage.setItem(key, value)</code>。</li>
<li>读取：<code>localStorage.getItem(key)</code>(单个)、<code>localStorage.valueOf()</code>(全部)。</li>
<li>删除：<code>localStorage.removeItem(key)</code>(单个)、<code>localStorage.clear()</code>(全部)。</li>
</ul>
</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">setStore</span> = (<span class="params">name, content</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> content !== <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">    content = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(content);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">setItem</span>(name, content);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getStore</span> = name =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">getItem</span>(name);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">removeStore</span> = name =&gt; &#123;</span><br><span class="line">  <span class="keyword">if</span> (!name) <span class="keyword">return</span>;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">localStorage</span>.<span class="title function_">removeItem</span>(name);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h2><blockquote>
<p>会话存储，关闭浏览器之后数据就会消失。非常适合单页应用程序，便于各业务模块之间的传值</p>
</blockquote>
<ul>
<li>特点<ul>
<li><strong>同源策略限制</strong> </li>
<li><strong>单标签页限制</strong>：同一个标签页中的同源页面共享数据。</li>
<li><strong>只在本地存储</strong>：数据只会在存储在本地，并在标签页关闭后清除。</li>
<li><strong>存储方式</strong>：采用键值对的方式，注意 value 值必须为字符串类型。</li>
<li><strong>存储上限限制</strong>：不同的浏览器存储的上限不同，但大多数限制在 5MB 以下。</li>
</ul>
</li>
<li>API<ul>
<li>存储：<code>sessionStorage.setItem(key, value)</code></li>
<li>读取<ul>
<li>单个：<code>sessionStorage.getItem(key)</code></li>
<li>全部：<code>sessionStorage.valueOf()</code></li>
</ul>
</li>
<li>删除<ul>
<li>单个：<code>sessionStorage.removeItem(key)</code></li>
<li>全部：<code>sessionStorage.clear()</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="以上区别"><a href="#以上区别" class="headerlink" title="以上区别"></a>以上区别</h2><ul>
<li>传递<ul>
<li>cookie 数据通常经过加密，而且会在浏览器和服务器间来回传递。</li>
<li>后两个不会自动把数据发给服务器，仅在本地保存。</li>
</ul>
</li>
<li>存储大小<ul>
<li>cookie 数据大小不能超过4k，始终在同源的 http 请求中携带。</li>
<li>后两个虽然也有存储大小的限制但比 cookie 大得多，可以达到 5M 及以上。</li>
</ul>
</li>
<li>生命周期<ul>
<li>cookie 数据只在过期时间之前一直有效。</li>
<li>localStorage存储持久数据，不要不主动删除数据就有效有效。</li>
<li>sessionStorage数据在当前浏览器窗口关闭后自动删除。</li>
</ul>
</li>
<li>作用域    <ul>
<li>sessionStorage 不在不同浏览器窗口中共享。</li>
<li>另外两个在所有同源窗口中都共享。</li>
</ul>
</li>
</ul>
<h2 id="临时数据"><a href="#临时数据" class="headerlink" title="临时数据"></a>临时数据</h2><blockquote>
<p>html 标签上添加自定义属性来存储和操作数据，注意 js 可以动态添加和删除，但不能删除行内添加的。</p>
</blockquote>
<ul>
<li>html：<code>div data-name=&quot;值&quot;</code>，name 为自定义属性名</li>
<li>注意：<code>data-e-name：eName, data-myName：myname</code></li>
<li>原生 js<ul>
<li>获取：<code>div.dataset.name</code></li>
<li>设置：<code>div.dataset.name = new</code></li>
<li>删除：<code>div.dataset.name = null</code></li>
</ul>
</li>
<li>jQuery<ul>
<li>获取：<code>$(&quot;div&quot;).data(&quot;name&quot;)</code></li>
<li>设置：<code>$(&quot;div&quot;).data(&quot;name&quot;, &quot;new&quot;)</code></li>
<li>删除：<code>$(&quot;div&quot;).removeDate(&quot;name&quot;)</code></li>
</ul>
</li>
</ul>
<h2 id="离线存储"><a href="#离线存储" class="headerlink" title="离线存储"></a>离线存储</h2><blockquote>
<p>Application Cache 应用程序缓存，常用于存储网页</p>
</blockquote>
<ul>
<li>优势<ul>
<li>加载快：已缓存资源加载速度块</li>
<li>离线浏览：用户可以在应用离线时使用</li>
<li>减少服务器负载：浏览器只从服务器下载更新过的资源</li>
</ul>
</li>
<li>使用<ul>
<li>html 标签添加 manifest 属性：html manifest&#x3D;”.&#x2F;js&#x2F;demo.manifest”</li>
<li>编写 manifest 文件：用于告知浏览器需要缓存和不需要缓存的内容</li>
</ul>
</li>
</ul>
<h1 id="九、其它"><a href="#九、其它" class="headerlink" title="九、其它"></a>九、其它</h1><ul>
<li>普通元素<ul>
<li>新增标签：<code>nav、header、aside、section、footer、canvas、video、output、...</code></li>
<li>新增属性：<code>contextmenu、contentEditable、hidden、draggable、data-*</code></li>
</ul>
</li>
<li>表单元素<ul>
<li>输入验证：<code>邮箱、地址、日期、数字、电话、范围、搜索、颜色</code></li>
<li>新增属性：<code>required、pattern、autofocus、autocomplete、novalidate、multiple</code></li>
</ul>
</li>
<li>超链接<ul>
<li>短信：<code>&lt;a href=&#39;sms:15919218899&#39;&gt;&lt;/a&gt;</code></li>
<li>电话：<code>&lt;a href=&quot;tel:15919218899&quot;&gt;&lt;/a&gt;</code></li>
<li>邮件：<code>&lt;a href=&quot;mailto:99519876@qq.com&quot;&gt;&lt;/a&gt;</code></li>
<li>地图：<code>&lt;a href=&quot;http://map.baidu.com/mobile/search...&quot;&gt;&lt;/a&gt;</code></li>
<li>QQ客服：<code>&lt;a target=&quot;_blank&quot; href=&quot;http://wpa.qq.com/msgrd?v=3&amp;...&quot;&gt;&lt;/a&gt;</code></li>
</ul>
</li>
<li>History<ul>
<li>功能：实现无刷新更新地址</li>
<li>API：<code>history.pushState、history.replaceState</code></li>
</ul>
</li>
</ul>

    </div>

    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;margin-top:20px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>chuangges
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://chuangges.gitee.io/2019/05/06/3-1-html/" title="HTML 元素">https://chuangges.gitee.io/2019/05/06/3-1-html/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh_CN" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/03/02/2-4-web%E5%9B%BE%E5%83%8F/" rel="prev" title="Web 图片、二维码、视频">
      <i class="fa fa-chevron-left"></i> Web 图片、二维码、视频
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/05/08/3-2-css/" rel="next" title="CSS 样式">
      CSS 样式 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%A5%E9%97%A8%E5%9F%BA%E7%A1%80"><span class="nav-number">1.</span> <span class="nav-text">入门基础</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E5%88%86%E7%B1%BB"><span class="nav-number">1.1.</span> <span class="nav-text">元素分类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%83%E5%B1%80%E6%A8%A1%E5%9E%8B"><span class="nav-number">1.2.</span> <span class="nav-text">布局模型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B0%8F%E7%9F%A5%E8%AF%86"><span class="nav-number">1.3.</span> <span class="nav-text">小知识</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81audio%E3%80%81video"><span class="nav-number">2.</span> <span class="nav-text">一、audio、video</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Video"><span class="nav-number">2.1.</span> <span class="nav-text">Video</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7"><span class="nav-number">2.1.1.</span> <span class="nav-text">标签属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.1.2.</span> <span class="nav-text">标签样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">2.1.3.</span> <span class="nav-text">对象属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95"><span class="nav-number">2.1.4.</span> <span class="nav-text">对象方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE"><span class="nav-number">2.2.</span> <span class="nav-text">自动播放</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90"><span class="nav-number">2.3.</span> <span class="nav-text">用户权限</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81Canvas"><span class="nav-number">3.</span> <span class="nav-text">二、Canvas</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%98%E5%88%B6%E5%9B%BE%E5%BD%A2"><span class="nav-number">3.1.</span> <span class="nav-text">绘制图形</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%98%E5%88%B6%E5%9B%BE%E5%83%8F"><span class="nav-number">3.2.</span> <span class="nav-text">绘制图像</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C"><span class="nav-number">3.3.</span> <span class="nav-text">动画效果</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%83%8F%E7%B4%A0%E5%A4%84%E7%90%86"><span class="nav-number">3.4.</span> <span class="nav-text">像素处理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81WebSocket"><span class="nav-number">4.</span> <span class="nav-text">三、WebSocket</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81Web-Worker"><span class="nav-number">5.</span> <span class="nav-text">四、Web Worker</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%BA%E5%88%B6"><span class="nav-number">5.1.</span> <span class="nav-text">机制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Web-%E4%B8%BB%E7%BA%BF%E7%A8%8B"><span class="nav-number">5.2.</span> <span class="nav-text">Web 主线程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#worker-%E6%96%B0%E7%BA%BF%E7%A8%8B"><span class="nav-number">5.3.</span> <span class="nav-text">worker 新线程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="nav-number">5.4.</span> <span class="nav-text">应用场景</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E9%99%90%E5%88%B6"><span class="nav-number">5.5.</span> <span class="nav-text">操作限制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%86%E7%B1%BB"><span class="nav-number">5.6.</span> <span class="nav-text">分类</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%94%E3%80%81%E6%8B%96%E6%94%BE%E6%93%8D%E4%BD%9C"><span class="nav-number">6.</span> <span class="nav-text">五、拖放操作</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6"><span class="nav-number">6.1.</span> <span class="nav-text">事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dataTransfer-%E5%AF%B9%E8%B1%A1"><span class="nav-number">6.2.</span> <span class="nav-text">dataTransfer 对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8B%96%E6%8B%BD%E4%B8%8A%E4%BC%A0%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87"><span class="nav-number">6.3.</span> <span class="nav-text">拖拽上传预览图片</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%AD%E3%80%81%E5%9C%B0%E7%90%86%E5%AE%9A%E4%BD%8D"><span class="nav-number">7.</span> <span class="nav-text">六、地理定位</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%83%E3%80%81%E5%85%A8%E5%B1%8F%E6%A8%A1%E5%BC%8F"><span class="nav-number">8.</span> <span class="nav-text">七、全屏模式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%85%AB%E3%80%81%E6%95%B0%E6%8D%AE%E5%82%A8%E5%AD%98"><span class="nav-number">9.</span> <span class="nav-text">八、数据储存</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#cookie"><span class="nav-number">9.1.</span> <span class="nav-text">cookie</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#localStorage"><span class="nav-number">9.2.</span> <span class="nav-text">localStorage</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sessionStorage"><span class="nav-number">9.3.</span> <span class="nav-text">sessionStorage</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A5%E4%B8%8A%E5%8C%BA%E5%88%AB"><span class="nav-number">9.4.</span> <span class="nav-text">以上区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%B4%E6%97%B6%E6%95%B0%E6%8D%AE"><span class="nav-number">9.5.</span> <span class="nav-text">临时数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A6%BB%E7%BA%BF%E5%AD%98%E5%82%A8"><span class="nav-number">9.6.</span> <span class="nav-text">离线存储</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B9%9D%E3%80%81%E5%85%B6%E5%AE%83"><span class="nav-number">10.</span> <span class="nav-text">九、其它</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="chuangges" src="" data-original="/images/chuang.png">
  <p class="site-author-name" itemprop="name">chuangges</p>
  <div class="site-description" itemprop="description">chuangge's blog.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/chuangges" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;chuangges" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>StackOverflow</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://juejin.im/" title="https:&#x2F;&#x2F;juejin.im&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">掘金</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.nowcoder.com/" title="https:&#x2F;&#x2F;www.nowcoder.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">牛客网</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.docschina.org/" title="https:&#x2F;&#x2F;www.docschina.org&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">印记中文</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://tool.lu/" title="http:&#x2F;&#x2F;tool.lu&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">在线工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tinypng.com/" title="https:&#x2F;&#x2F;tinypng.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片压缩</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://bigjpg.com/" title="https:&#x2F;&#x2F;bigjpg.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片放大</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tool.chinaz.com/" title="https:&#x2F;&#x2F;tool.chinaz.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">站长工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://learn-anything.xyz/" title="https:&#x2F;&#x2F;learn-anything.xyz&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Learn-Anything</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://stackoverflow.com/" title="https:&#x2F;&#x2F;stackoverflow.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Stack-Overflow</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">chuangge</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">1m</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">15:14</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"left","width":180,"height":360},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(e){e.imageLazyLoadSetting.processImages=t;var n=e.imageLazyLoadSetting.isSPA,i=e.imageLazyLoadSetting.preloadRatio||1,r=o();function o(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){n&&(r=o());for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(e.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];e=function(){r=r.filter(function(t){return o!==t})},(t=o).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,t.removeAttribute("data-original"),e&&e()},t.src!==i&&(n.src=i))}()}function a(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",a),e.addEventListener("resize",a),e.addEventListener("orientationchange",a)}(this);</script></body>
</html>
